<template>
  <div class="server-details" v-loading.fullscreen="loading" element-loading-text="加载服务器数据...">
    <!-- 页面头部 -->
    <el-page-header
      @back="goBack"
      :content="currentResource.resourceName || '数据库详情'"
      class="page-header">
      <template #extra>
        <el-button-group>
          <el-button
            size="small"
            icon="el-icon-refresh"
            @click="refreshData">
            刷新
          </el-button>
        </el-button-group>
      </template>
    </el-page-header>
    <div class="cloud-database-dashboard">

      <el-tabs v-model="activeTab" class="top-tabs" @tab-click="handleTab">
        <el-tab-pane label="数据库详情" name="CloudDatabaseDashboard">
          <CloudDatabaseDashboard v-if="activeTab === 'CloudDatabaseDashboard'" :current-resource="currentResource"></CloudDatabaseDashboard>
        </el-tab-pane>
        <el-tab-pane label="访问控制" name="AccessControl">
          <AccessControl v-if="activeTab === 'AccessControl'" :current-resource="currentResource"></AccessControl>
        </el-tab-pane>
        <el-tab-pane label="账户信息" name="DatabaseAccounts">
          <DatabaseAccounts v-if="activeTab === 'DatabaseAccounts'" :current-resource="currentResource"></DatabaseAccounts>
        </el-tab-pane>

        <el-tab-pane label="监控信息" name="DatabaseMonitor">
          <DatabaseMonitor v-if="activeTab === 'DatabaseMonitor'" :current-resource="currentResource"></DatabaseMonitor>
        </el-tab-pane>
        <el-tab-pane label="数据库管理" name="DatabaseManagement">
          <DatabaseManagement v-if="activeTab === 'DatabaseManagement'" :current-resource="currentResource"></DatabaseManagement>
        </el-tab-pane>
        <!--      <el-tab-pane label="备份恢复" name="3"></el-tab-pane>-->
        <el-tab-pane label="慢SQL" name="SlowSQLMonitor">
          <SlowSQLMonitor v-if="activeTab === 'SlowSQLMonitor'" :current-resource="currentResource"></SlowSQLMonitor>
        </el-tab-pane>
        <el-tab-pane label="备份信息" name="BackupList">
          <BackupList v-if="activeTab === 'BackupList'" :current-resource="currentResource"></BackupList>
        </el-tab-pane>

        <el-tab-pane label="日志文件" name="LogFiles">
          <LogFiles v-if="activeTab === 'LogFiles'" :current-resource="currentResource"></LogFiles>
        </el-tab-pane>
      </el-tabs>

    </div>
  </div>
</template>

<script>

import BackupList from "@/views/bom/CloudDatabase/BackupList.vue";
import DatabaseAccounts from "@/views/bom/CloudDatabase/DatabaseAccounts.vue";
import CloudDatabaseDashboard from "@/views/bom/CloudDatabase/CloudDatabaseDashboard.vue";
import SlowSQLMonitor from "@/views/bom/CloudDatabase/SlowSQLMonitor.vue";
import DatabaseMonitor from "@/views/bom/CloudDatabase/DatabaseMonitor.vue";
import LogFiles from "@/views/bom/CloudDatabase/LogFiles.vue";
import DatabaseManagement from "@/views/bom/CloudDatabase/DatabaseManagement.vue";
import AccessControl from "@/views/bom/hostresource/accessControl.vue";

export default {
  name: 'CloudDatabaseDetails',
  components: {
    DatabaseManagement, LogFiles, DatabaseMonitor, SlowSQLMonitor, CloudDatabaseDashboard, DatabaseAccounts, BackupList,
    AccessControl,

  },
  data() {
    return {
      activeTab: 'CloudDatabaseDashboard',
      currentResource: null,
      resourceList: [],
      loading: false, // 添加 loading 状态
    };
  },
  created() {
    // 从 sessionStorage 中获取服务器资源对象
    const savedResource = sessionStorage.getItem('currentServerResource')
    if (savedResource) {
      this.currentResource = JSON.parse(savedResource)
      // 可选：获取后清除存储的数据
      sessionStorage.removeItem('currentServerResource')
    } else {
      // 如果没有存储的数据，则通过 ID 重新获取服务器信息
      //this.fetchServerDetails(this.id)
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$emit("handler-after");
    },
    // 刷新数据
    refreshData() {
      this.$message.success('数据已刷新')
    },
    handleTab(tab) {
      console.log("切换到标签页:", tab.name);
    },
    updateCurrentResource(resource) {
      this.currentResource = resource;
      console.log("更新当前资源:", this.currentResource);
    },
    showCloudDatabaseDashboard(resource) {
      this.activeTab = 'CloudDatabaseDashboard';
      this.updateCurrentResource(resource);
    }
  },
  watch: {
    activeTab(newVal) {
      console.log('标签页切换到:', newVal);
    },
    currentResource(newVal) {
      console.log('当前资源更新:', newVal);
    }
  }
};
</script>
<style scoped>
.server-details {
  padding: 10px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  background-color: #fff;
  padding: 16px 20px;
  margin-bottom: 8px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}
.cloud-database-dashboard {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  color: #333;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 顶部标签样式 */
.top-tabs {
  background-color: #fff;
  padding: 10px 20px 0;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  border-bottom: none;
}

.top-tabs .el-tabs__header {
  margin-bottom: 0;
}

.top-tabs .el-tabs__nav-wrap::after {
  height: 1px;
  background-color: #e4e7ed;
}

.top-tabs .el-tabs__item {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #606266;
}

.top-tabs .el-tabs__item.is-active {
  color: #409EFF;
  font-weight: bold;
}

</style>
